<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { defaultUserForm, userFormRules } from '../index'
import type { CustomDialogInstance, EnterpriseInfo } from '@/types'

import { enterpriseApi } from '@/api'
import REGEXP from '@/utils/modules/regexp'
// ------------------use------------------
// #region
defineProps<{
  title: string
}>()
const emits = defineEmits<{
  (e: 'save-success', value: any): void
}>()
const formRules = {
  ...userFormRules,
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: REGEXP.PHONE_NUMBER, message: '请输入正确的手机号' },
  ],
}
const formData = defineModel('data', {
  default: () => defaultUserForm,
})
const [enterpriseList, setEnterpriseList] = useState<
  EnterpriseInfo[]
>([])

const dialogRef = ref<CustomDialogInstance | null>(null)
const formRef = ref<FormInstance | null>(null)

onMounted(() => {
  getEnterpriseList()
})

async function getEnterpriseList() {
  const { data: res } = await enterpriseApi.queryList()
  setEnterpriseList(res)
}
function handleSelectChange(row: EnterpriseInfo) {
  formData.value.tenantName = row.enterpriseName
}
async function open() {
  dialogRef.value?.open?.()
  await nextTick()
  dialogRef.value?.setSaving?.(false)
  formRef.value?.resetFields()
}
function close() {
  dialogRef.value?.close?.()
}
async function clickSave(done: () => void) {
  try {
    await formRef.value?.validate()
    emits('save-success', formData.value)
  }
  catch (error) {
    done()
  }
}
defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    :title="title"
    width="600px"
    @confirm="clickSave"
  >
    <el-form
      ref="formRef"
      label-width="80px"
      label-position="right"
      :model="formData"
      :rules="formRules"
      inline
      class="width-fill"
    >
      <el-form-item
        label="用户名"
        prop="userName"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData.userName"
          maxlength="20"
          placeholder="请填写用户名"
        />
      </el-form-item>
      <el-form-item
        label="登录账号"
        prop="loginName"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData.loginName"
          maxlength="20"
          placeholder="请填写登录账号"
        />
      </el-form-item>

      <el-form-item
        label="手机"
        prop="phone"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData.phone"
          maxlength="11"
          placeholder="请填写手机号"
        />
      </el-form-item>
      <el-form-item
        label="所属公司"
        prop="tenantId"
        class="width-fill"
      >
        <el-select
          v-model="formData.tenantId"
          class="width-fill"
        >
          <el-option
            v-for="item in enterpriseList"
            :key="item.id"
            :label="item.enterpriseName"
            :value="item.id"
            @click="handleSelectChange(item)"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-model="formData.email"
        label="邮箱"
        class="width-fill"
      >
        <el-input
          v-model.trim="formData!.email"
          maxlength="20"
          placeholder="请填写邮箱"
        />
      </el-form-item>
    </el-form>
  </CustomDialog>
</template>
